<template>
  <yy-paging
    v-model="dataList"
    @query="queryList"
    ref="paging"
    :auto="false"
    @scroll="scroll"
    :refresher-enabled="true"
  >
    <template #top>
      <u-navbar
        :is-back="false"
        :background="{ backgroundColor: isScroll ? '#F2F5F7' : 'transparent' }"
        :border-bottom="false"
        :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
      >
        <view class="grid grid-cols-3 items-center px-3 w-full">
          <view class="flex col-span-1 items-center" @click="vk.navigateBack()">
            <image src="/static/dddr128.png" mode="aspectFill" class="size-6" />
          </view>
          <view class="line-clamp-1 flex col-span-1 justify-center">
            <view class="text-[#000] font-bold text-base"> 提现详情 </view>
          </view>
          <view class="flex col-span-1 justify-end">
            <view class="text-[14px] text-[#5C6068]"> </view>
          </view>
        </view>
      </u-navbar>
    </template>
    <template #empty>
      <yy-empty></yy-empty>
    </template>
    <template #loadingMoreNoMore>
      <yy-nomore text=""></yy-nomore>
    </template>
    <view class="flex flex-col gap-4 p-4">
      <view class="flex flex-col gap-4 justify-center items-center">
        <!-- 审核中 -->
        <image src="/static/dddr112.png" mode="aspectFill" class="size-[2.25rem]" v-if="d.ischeck == 0" />
        <!--成功 -->
        <image src="/static/dddr113.png" mode="aspectFill" class="size-[2.25rem]" v-if="d.ischeck == 1" />
        <!-- 失败 -->
        <image src="/static/dddr114.png" mode="aspectFill" class="size-[2.25rem]" v-if="d.ischeck == 2" />
        <view class="text-[.8125rem] text-[#5C6068]"> {{ d.description }}</view>
        <view class="flex items-baseline text-[#161A24] font-bold" v-if="d.money">
          <view class="text-[1.25rem]">￥</view>
          <view class="text-[2rem]">{{ d.money }}</view>
        </view>
      </view>
      <u-line />

      <view class="p-5">
        <view class="flex" v-for="(i, k) in statusList" :key="k">
          <view class="flex flex-col items-center">
            <view class="size-3 rounded-full" :class="currentStatus < k ? 'bg-[#E6E7E9]' : 'bg-[#00A9AB]'"></view>
            <view
              class="border-l-[.0625rem] h-[5rem]"
              :class="currentStatus <= k ? 'bg-[#E6E7E9]' : 'bg-[#00A9AB]'"
              v-if="statusList.length - 1 !== k"
            />
          </view>
          <view class="flex flex-col flex-1 gap-1 ml-5" v-if="k == 0">
            <view class="text-[.875rem] text-[#161A24]"> 发起提现</view>
            <view class="text-[.75rem] text-[#8E9299]"> {{ d.create_time }}</view>
          </view>
          <view class="flex flex-col flex-1 gap-1 ml-5" v-if="k == 1">
            <view class="text-[.875rem] text-[#161A24]"> 审核中</view>
          </view>
          <!-- 审核状态:0=待审核,1=通过,2=拒绝,3=支付宝转账失败 -->
          <!--  -->
          <view class="flex flex-col flex-1 gap-1 ml-5" v-if="k == 2">
            <!-- 审核中 -->
            <template v-if="d.ischeck == 0">
              <view class="text-[.875rem] text-[#8E9299]"> 提现成功</view>
            </template>
            <!-- 提现成功 -->
            <template v-if="d.ischeck == 1">
              <view class="text-[.875rem] text-[#161A24]"> 提现成功</view>
              <view class="text-[.75rem] text-[#8E9299]"> {{ d.handle_time }}</view>
            </template>
            <!-- 提现失败 -->
            <template v-if="d.ischeck == 2 || d.ischeck == 3">
              <view class="flex gap-2 items-center">
                <view class="text-[.875rem] text-[#161A24]">提现失败</view>
                <view class="bg-[#EBECEE] rounded-[4p] px-1">
                  <view class="text-[.6875rem] text-[#8E9299]"> 已退回至钱包余额</view>
                </view>
              </view>
              <view class="text-[.75rem] text-[#8E9299]"> {{ d.handle_time }}</view>
              <view class="text-[.6875rem] text-[#FF2948]">
                {{ d.notes }}
              </view>
            </template>
            <!-- < -->
          </view>
        </view>
      </view>

      <u-line />

      <view class="flex flex-col gap-3">
        <view class="flex justify-between items-center text-[.875rem]">
          <view class="text-[#8E9299]">提现金额</view>
          <view class="text-[#161A24]">￥{{ d.money }}</view>
        </view>
        <view class="flex justify-between items-center text-[.875rem]">
          <view class="text-[#8E9299]">提现账户</view>
          <view class="text-[#161A24]">{{ d.accounts }}</view>
        </view>
        <view class="flex justify-between items-center text-[.875rem]">
          <view class="text-[#8E9299]">支付宝账户名</view>
          <view class="text-[#161A24]">{{ d.name }}</view>
        </view>
        <view class="flex justify-between items-center text-[.875rem]">
          <view class="text-[#8E9299]">预计到账时间</view>
          <view class="text-[#161A24]">{{ d.under_review_text }}</view>
        </view>
      </view>
    </view>
  </yy-paging>
</template>
<!-- 审核状态:0=待审核,1=通过,2=拒绝,3=支付宝转账失败 -->
<script>
  export default {
    data() {
      return {
        isScroll: false,
        dataList: [],
        automatic: false,
        statusList: [
          {
            title: '发起提现',
            time: ''
          },
          {
            title: '审核中',
            time: ''
          },
          {
            title: '提现成功',
            time: ''
          }
        ],
        // 当前状态索引（0=发起提现, 1=审核中, 2=提现成功）
        currentStatus: 1,
        d: {}
      }
    },
    onLoad(options) {
      this.id = options.id
      setTimeout(() => {
        this.$refs.paging.reload()
      }, 1)
    },

    methods: {
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },
      async queryList(page, limit) {
        let res = await api.withdrawalProgress({ id: this.id })
        this.d = res.data
        if (res.data.ischeck) {
          this.currentStatus = 2
        }
        this.$refs.paging.complete([''])
      }
    }
  }
</script>

<style lang="scss" scoped></style>
